#st段 统计表
<template>
  <div id="stCensus">
    <div class="box">
      <el-table :data="stCensusList" :max-height="defaultHeight" :class="{show: showStandardEcg === false}" class="stCensusList" style="width: 100%">
        <el-table-column fixed prop="startTime" label="开始时间" width="180"></el-table-column>
        <el-table-column prop="durationTime" label="持续时间 分"></el-table-column>
        <el-table-column prop="passageway" label="通道"></el-table-column>
        <el-table-column prop="amplitudeExtremum" label="幅度极值"></el-table-column>
        <el-table-column prop="gradient" label="斜率"></el-table-column>
        <el-table-column prop="totalSTSegmentIschemicLoad" label="ST段缺血总负荷"></el-table-column>
        <el-table-column prop="heartBeatsNum" label="含心搏数"></el-table-column>
      </el-table>
    </div>
    <div class="btnGroup">
      <div>
        <el-button size="small">删除</el-button>
        <el-button size="small">另存为</el-button>
        <el-button size="small">重新分析</el-button>
      </div>
      <div class="b-right">
        <el-button v-if="showStandardEcg" size="small">保存</el-button>
      </div>
    </div>
    <div v-if="showStandardEcg" class="top">
      <ecg-chart 
        ref = "ecgChart"
        :width-value="ecgWidthValue" 
        :height-value="ecgHeightValue"
      ></ecg-chart>
    </div>
    <div v-if="showStandardEcg" class="btnGroup">
      <div class="b-left">
        <div>
          <img src="./../../../assets/resource/ecg/step-backward.png" alt title="最前" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-left.png" alt title="前一页" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-left.png" alt title="前一秒" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-right.png" alt title="后一秒" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/caret-right.png" alt title="后一页" class="littleBtn" />
          <img src="./../../../assets/resource/ecg/step-forward.png" alt title="最后" class="littleBtn" />
        </div>
        <el-button size="small">转到</el-button>
        <el-button size="small">基线上移</el-button>
        <el-button size="small">基线下移</el-button>
      </div>
      <div class="b-right">
        <el-button size="small" @click="hideStandardEcg">隐藏</el-button>
      </div>
    </div>
    <div v-if="!showStandardEcg">
      <el-button size="small" class="fullBtn" @click="toShowStandardEcg">点击此处显示标准心电图</el-button>
    </div>
  </div>
</template>

<script>
import EcgChart from '@/components/ecgChart'

export default {
  components: {
    EcgChart
  },
  data() {
    return {
      ecgWidthValue: undefined,
      ecgHeightValue: undefined,
      stCensusList: [],
      defaultHeight: 500,
      showStandardEcg: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.ecgWidthValue = window.innerWidth - 10
    })
  },
  methods: {
    toShowStandardEcg() {
      this.showStandardEcg = true
      this.defaultHeight = 500
      this.$nextTick(() => {
        this.$refs.ecgChart.chartBox()
      })
    },
    hideStandardEcg() {
      this.showStandardEcg = false
      this.defaultHeight = window.innerHeight - 120
    }
  }
}
</script>

<style lang="scss" scoped>
#stCensus {
  width: 100%;
  .copy {
    border: 1px solid #c0c4cc;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  .box {
    display: flex;
    width: 100%;
    .stCensusList {
      height: 40vh;
    }
    .show {
      height: 75vh;
    }
  }
  .btnGroup {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #979797;
    .b-left {
      display: flex;
      align-items: end;
    }
    .el-select {
      width: 120px;
      margin-right: 20px;
    }
    .name {
      margin-right: 10px;
    }
  }
  .top {
    .container {
      border: 1px solid #979797;
    }
  }
  .fullBtn {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
  }
  .littleBtn {
    width: 30px;
    height: 30px;
    border: 1px solid #979797;
    margin-right: 10px;
  }
  .el-dialog {
    .leadList {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 53px;
        margin-top: 10px;
      }
    }
    .five {
      .five-list-box {
        display: flex;
        flex-wrap: wrap;
        .five-list {
          margin-right: 10px;
          .name {
            font-size: 14px;
            color: #4a4a4a;
            text-align: left;
            width: 120px;
            display: inline-block;
          }
          .el-input {
            width: 100px;
          }
        }
      }
    }
    .list {
      margin-top: 10px;
      .name {
        font-size: 14px;
        color: #4a4a4a;
        text-align: left;
        width: 100px;
        display: inline-block;
      }
      .el-select {
        width: 115px;
      }
    }
  }
}
</style>



